I am getting this warning message whenever I am trying to use <button></button> tag in my react app. Can anyone explain it a bit more with proper reason?

(My Code is:)

<button onClick={() => signInWithGoogle()} className="px-7 py-3 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out w-full flex justify-center items-center mb-3" style={{ "backgroundColor": "#3b5998" }} href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">
                            {/* <!-- Google --> */}
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 320 512"
                                className="w-3.5 h-3.5 mr-2">
                                <path
                                    fill="currentColor"
                                    d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
                                /></svg>With Google</button>

[I have added the code Screnter image description here

(The message I am getting is:) "The element button has an implicit role of button. Defining this explicitly is redundant and should be avoided.eslintjsx-a11y/no-redundant-roles"